
  
  <!-- FIN DES ESTILO PARA VALIDACION -->
<script>
    
    
    /*  COMEINZA LA PRUBA PARA LA VALIDACION DE FORMULARIO  */
    /*
     var producto = $( ".producto" ),
      detalle = $( ".detalle" ),
      stock = $( ".stock" ),
      precioCompra = $( ".precioCompra" ),
      precioVenta = $( ".precioVenta " ),
      categoria = $( ".categoria" ),
      precioOferta = $( ".precioOferta" ),
      allFields = $( [] ).add( producto ).add( detalle ).add( stock ).add( precioCompra ).add( precioVenta ).add( categoria ).add( precioOferta ),
      tips = $( ".validateTips" );
    
     function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }
 
    function checkLength( o, n ) {
        alert(o);
      if (o==null || o=="") {
          
        o.addClass( "ui-state-error" );
        updateTips( "el Campo " + n + " es obligatorio" );
        return false;
      } else {
        return true;
      }
    }
 
    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }
    */
    
    /*  FIN DE LA PRUEBA PARA LA VALIDACION DE FORMULARIOS  */
    
    
    $(document).ready(function() {
        idproglobal = 0;
        $(".botones").button();
        /******************************************************************/
        //PRODUCTOS
        /******************************************************************/
        //MOSTRAR TABLA ACTUAL
        mostrarDatos();
        //SELECCION DEL COMBOBOX ON CHANGE CATEGORIAS ADD
        $("#list-categoria").change(function() {
            var opcion = $("#select-categoria").val();

            $("#addcatinput").val(opcion);
        });
        //SELECCION DEL COMBOBOX ON CHANGE CATEGORIAS EDIT
        $("#list-categoria2").change(function() {

            var opcion1 = $("#select-categoria2").val();

            $("#editcatinput").val(opcion1);

        });
        //OPEN DIV NUEVO PRODUCTO BUTTON
        //-----------------------------------
        $("#adddivproducto").click(function() {
            $("#formproducto").trigger("reset");
            llenarlistboxcategorias(true);
            $("#divproducto").dialog("open");
            alert(producto1+'/'+detalle1+'/'+stock1+'/'+precioCompra1+'/'+precioVenta1+'/'+categoria1+'/'+precioOferta1);
        });
        //OPEN DIV EDIT PRODUCTO 
        //-------------------------------------
        //LLENO EL EDITAR CON DATOS EXISTENTES
        $(document).on("click", ".editar", function() {
            idproglobal = $(this).attr('data-id');
            $("formedit").trigger("reset");
            var producto = "";
            var detalle = "";
            var stock = "";
            var preciocompra = "";
            var precioventa = "";
            var categoria_id = "";
            var precioferta = "";
            var list = "";
            $.ajax({
                url: 'http://localhost:26/ecomerce/Productos/productobusq/' + idproglobal,
                dataType: 'json',
                type: "POST",
                success: function(data) {
                    $.each(data, function(item2) {
                     
                        producto = data[item2].producto;
                        detalle = data[item2].detalleProducto;
                        stock = data[item2].stock;
                        preciocompra = data[item2].precioCompra;
                        precioventa = data[item2].precioVenta;
                        categoria_id = data[item2].categoria_id;
                        precioferta = data[item2].precioOferta;

                        return false;
                    });

                    $("#editproinput").val(producto);
                    $("#editdetinput").val(detalle);
                    $("#editstoinput").val(stock);
                    $("#editcominput").val(preciocompra);
                    $("#editveninput").val(precioventa);
                    $("#editcatinput").val(categoria_id);
                    $("#editofeinput").val(precioferta);
                    llenarlistboxcategorias(false);
                    $("#editarproducto").dialog("open");
                },
                error: function() {
                    alert("No Existe este producto");
                }
            });

        });

        /****************************************************/
        /****************************************************/




        /****************************************************/
        /****************************************************/
        //DECLARACION DIALOG DIV AGREGAR Y EDITAR PRODUCTOS
        $("#divproducto").dialog({
            height: 'auto',
            width: 'auto',
            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 300
            },
            hide: {
                effect: "blind",
                duration: 300
            }
            
        }).css("font-size", "15px", "width", "auto");
        $('#divproducto').submit(function(e) {
        
            e.preventDefault();
        });
        /****************************************************/
        /****************************************************/
        $("#editarproducto").dialog({
            height: 'auto',
            width: 'auto',
            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 300
            },
            hide: {
                effect: "blind",
                duration: 300
            }
        }).css("font-size", "15px", "width", "auto");
        $('#editarproducto').submit(function(e) {
            e.preventDefault();
        });
        /****************************************************/
        //GUARDAR PRODUCTO BUTTON ADD DIALOG
        $("#subir").click(function(e) {
            e.preventDefault();
          /* var bValid = true;
          allFields.removeClass( "ui-state-error" );
 
          bValid = bValid && checkLength( producto, "username" );
          bValid = bValid && checkLength( detalle, "username" );
          bValid = bValid && checkLength( stock, "username" );
          bValid = bValid && checkLength( precioCompra, "username" );
          bValid = bValid && checkLength( precioVenta, "username" );
          bValid = bValid && checkLength( categoria, "username" );
          bValid = bValid && checkLength( precioOferta, "username" );
 
          bValid = bValid && checkRegexp( producto, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
          bValid = bValid && checkRegexp( detalle, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
          bValid = bValid && checkRegexp( stock, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
          bValid = bValid && checkRegexp( precioCompra, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
          bValid = bValid && checkRegexp( precioVenta, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
          bValid = bValid && checkRegexp( categoria, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
          bValid = bValid && checkRegexp( precioOferta, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
        
        if ( bValid ) {  
        $("#formid").validate({
        rules: {
            producto: { required: true, minlength: 2},
            email: { required:true, email: true},
            telefono: { minlength: 10, maxlength: 15},
            mensaje: { required:true, minlength: 2}
        },
        messages: {
            nombre: "Debe introducir su nombre.",            
            email : "Debe introducir un email válido.",
            telefono : "El número de teléfono introducido no es correcto.",
            mensaje : "El campo Mensaje es obligatorio.",
        },
        submitHandler: function(form){*/ 
        $.ajax({
                url: "http://localhost:26/ecomerce/Productos",
                type: "POST",
                data: $("#formproducto").serialize(),
                success: function() {
                    alert("Agregado con exito");
                    mostrarDatos();
                    $("#divproducto").dialog("close");

                },
                error: function() {

                }
            });
        
        
        });
        /****************************************************/
        /****************************************************/
        //EDITAR PRODUCTO BUTTON DIALOG
        $("#editarbutton").click(function(e) {
            e.preventDefault();
            $.ajax({
                url: 'http://localhost:26/ecomerce/Productos/edit/' + idproglobal,
                type: "POST",
                data: $("#formedit").serialize(),
                success: function() {
                    mostrarDatos();
                    alert("Editado con exito");
                    $("#editarproducto").dialog("close");
                }
            });

        });
        /****************************************************/





        /****************************************************/
        //ELIMINAR PRODUCTO BUTTON 
        $(document).on("click", ".delete", function(e) {
            e.preventDefault();

            var idpro = $(this).attr('data-id');
            $.post("http://localhost:26/ecomerce/Productos/delete/",{Id:idpro},function(respuesta){
                    alert("Eliminado con exito");
                    mostrarDatos();
            
            });
        });
    });
    //FUNCION PARA MOSTRAR DATOS DE LA TABLA
    function mostrarDatos() {
        var tabla = "";
        $.ajax({
            url: 'http://localhost:26/ecomerce/Productos/listaproductos',
            dataType: 'json',
            beforeSend: function() {
                $('#tablaproductos').html("<center><img src='/ecomerce/css/img/ajax_small.gif'/></center>");
            },
            success: function(data) {   
               if(data!=""){
                    tabla = '<table>';
                    tabla += '<tr>';
                    tabla += '<th>Id</th><th>Nombre</th><th>Detalle</th><th>Stock</th><th>P.Compra</th><th>P.Venta</th><th>Categoria</th><th>Precio Oferta</th>';
                    tabla += '</tr>';
                    $.each(data, function(index, item) {
                        tabla += '<tr>';
                        tabla += '<td>' + item.Producto.id + '</td>';
                        tabla += '<td>' + item.Producto.producto + '</td>';
                        tabla += '<td>' + item.Producto.detalleProducto + '</td>';
                        tabla += '<td>' + item.Producto.stock + '</td>';
                        tabla += '<td>' + item.Producto.precioCompra + '</td>';
                        tabla += '<td>' + item.Producto.precioVenta + '</td>';
                        tabla += '<td>' + item.Categoria.categoria + '</td>';
                       
                        tabla += '<td><button type="button" class="editar" data-id="' + item.Producto.id + '">Editar</button></td>';
                        tabla += '<td><button type="button" class="delete" data-id="' + item.Producto.id + '">Eliminar</button></td>';
                        tabla += '</tr>';
                    });
                    tabla += '</table>';
                    $('#tablaproductos').html(tabla);
              } else {
                    tabla = '<center>No hay productos en la base de datos</center>';
                  $('#tablaproductos').html(tabla);
                }
            }
        });
    }
    function llenarlistboxcategorias(resp) {
        $.ajax({
            url: 'http://localhost:26/ecomerce/categorias/listacategorias',
            dataType: 'json',
            success: function(data) {
                if (resp) {
                    var list = '<select id="select-categoria"><option>Seleccione una Categoria</option>';
                } else if (!resp) {
                    var list = '<select id="select-categoria2"><option>Seleccione una Categoria</option>';
                }
                $.each(data, function(item) {
                    var idCat = data[item].Categoria.id;
                    var categorianom = data[item].Categoria.categoria;
                    list += '<option value=' + idCat + '>' + categorianom + '</option>';
                });
                list += '</select>';
                if (resp) {
                    $('#list-categoria').html(list);

                } else if (!resp) {
                    $('#list-categoria2').html(list);

                }
            }

        });
    }

    /********************************************************************/
//CIERRE PRODUCTOS
    /********************************************************************/
</script>
<br><br><hr>
<center><button  id="adddivproducto" class="botones">Nuevo Producto</button></center>
<!--AGREGAR PRODUCTOS -->
<div id="divproducto" title="Agegar Producto">
    <div id="stylized" class="myform">
    <form id="formproducto" method="POST">
        <label> Producto:</label> <input id="addproinput" class="fieldform" type="text" name="producto" required><br>
        <label>Detalle: </label><br><textarea id="adddetinput" class="fieldform" name="detalleProducto" required></textarea><br>
        <label>Stock:</label> <input id="addstoinput" class="fieldform" type="text" name="stock" required><br>
        <label>Precio Compra:</label> <input id="addcominput" class="fieldform" type="text" name="precioCompra" required><br>
        <label>Precio Venta:</label> <input id="addveninput" class="fieldform" type="text" name="precioVenta" required><br>
        <label>Categoria:</label> <div id="list-categoria"></div><br>
        <input id="addcatinput" class="fieldform" type="hidden" name="categoria_id" >
        <label>Precio Oferta: </label><input id="addofeinput" class="fieldform" type="hidden" name="precioOferta" required><br>
        <input class="subir" type="submit"  id="subir" value="Guardar">
    </form></div>
</div>
<div id="tablaproductos"></div>

<!--EDITAR PRODUCTOS -->
<div id="editarproducto" title="Editar Producto">
    <div id="stylized" class="myform">
    <form id="formedit" method="POST" >
        <label>Producto:</label> <input id="editproinput" class="producto" type="text" name="producto" required><br>
        <label>Detalle:</label> <br><textarea id="editdetinput" class="detalle"  name="detalleProducto"></textarea><br>
        <label>Stock:</label> <input id="editstoinput" class="stock" type="text" name="stock" required><br>
        <label>Precio Compra:</label> <input id="editcominput" class="precioCompra" type="text" name="precioCompra" required><br>
        <label>Precio Venta:</label> <input id="editveninput" class="precioVenta" type="text" name="precioVenta" required><br>
        <label>Categoria:</label> <div id="list-categoria2"></div><br>
        <input id="editcatinput" class="categoria" type="hidden" name="categoria_id">
        <label>Precio Oferta:</label> <input id="editofeinput" class="precioOferta" type="hidden" name="precioOferta" required><br>
        <input class="subir" type="submit"  id="editarbutton" value="Guardar Cambios">
    </form></div>
</div>

<!-- DIALOGO PRODUCTO -->


